<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>注册</title>
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <style>
        #formgroup .title {width: 100%; text-align: center; margin-bottom: 8px;}
        #formgroup .item {padding: 3px }
        #formgroup .item input {height: 30px;width: 100%; border-top: 0; border-right: 0; border-left: 0; border-bottom: 1px solid #aaa}
        #formgroup .item button {border:1px solid #ccc; border-radius: 2px; background-color: #fff; font-size: 14px; color: #333; padding: 5px 10px 5px 10px}
        #formgroup .item .register {font-size: 12px; text-decoration: none; margin-left: 30px}

        #tips {margin-top: 20px; padding: 5px; text-align: center; overflow: hidden; background-color: #eee; font-size: 12px; display:none;}

        .flex-col-center {display: -webkit-flex; display: flex; flex-direction: column; justify-content: center; align-items: stretch; }
        .flex-row-center {display: -webkit-flex; display: flex; flex-direction: row; justify-content: center; align-items: center; }
        .flex-row-center-end {display: -webkit-flex; display: flex; flex-direction: row; justify-content: center; align-items: flex-end; }

        .height-r100 {height: 100%}
        .width-r80 {width: 80%}
        .margin-8 {margin: 8px}
        .margin-y8 {margin: 8px 0 8px 0}
        .font-12 {font-size: 12px}

        .shadow {
            box-shadow:0 0 3px rgba(0, 0, 0, 0.2);
            -webkit-box-shadow:0 0 3px rgba(0, 0, 0, 0.2);
            -moz-box-shadow:0 0 3px rgba(0, 0, 0, 0.2);
        }

    </style>
</head>
<body>

<div class="flex-col-center height-r100 ">
    <div id="formgroup">
        <h4 class="title">账号注册， 用以记录您专属的信息</h4>
        <input type="hidden" name="from" value="<?php $from ?>">
        <div class="item">
            <div class="margin-y8 font-12">用户名</div>
            <input type="text" name="username" id="username">
            <h6></h6>
        </div>
        <div class="item">
            <div class="margin-y8 font-12">密码</div>
            <input type="password" name="password" id="password">
            <h6></h6>
        </div>
        <div class="item">
            <div  class="margin-y8 font-12">确认密码</div>
            <input type="password" name="password_confirm" id="password_confirm">
            <h6></h6>
        </div>
        <div class="item">
            <div class="margin-y8 font-12">验证码</div>
            <div class="flex-row-center-end">
                <input type="text" name="vcode" id="vcode">
                <img style="width:80px;margin-left:2px" src="/user_register_vcode" onclick="changeVimage()" id="regVimage" alt="图形验证码">
            </div>
            <h6></h6>
        </div>
        <div class="item flex-row-center">
            <button class="shadow" id="reg_submit" onclick="reg_submit()">注 册</button>
            <a class="register" href="/user_login">登录</a>
        </div>
    </div>
    <div id="tips" class="flex-row-center shadow">
        <div id="tips-msg">xxxxxxx</div>
    </div>
</div>


<script src="/lib/jquery.min.js"></script>
<script>
    function reg_submit() {
        //$('#reg_submit').attr("disabled",true);
        let uname = $('#username').val();

        $.when(
            $.ajax(
                {
                    type: 'post',
                    url: '/user_name_repeat',
                    data: {username: uname},
                    dataType: 'json',
                    success: function(data) {
                        if (data.code === 1) {
                            //$('#reg_submit').attr("disabled",true);
                        } else {
                            $('#tips-msg').html(data.msg);
                            $('#tips').show();
                        }
                    }
                }
            )
        ).done(function (data) {
            //$('#reg_submit').attr("disabled",true);
            if (data.code === 1) {
                reg();
            }

        });
    }

    function reg() {
        let uname = $('#username').val();
        let pswd = $('#password').val();
        let pswd_c = $('#password_confirm').val();
        let vcode = $('#vcode').val();
        let url = '/user_register';

        if (pswd !== pswd_c) {
            $('#tips-msg').text('两次输入的密码不一致, 请重新输入');
            $('#tips').show();
        }

        $.ajax(
            {
                type: 'post',
                url: url,
                data: {username: uname, password:pswd, password_confirm:pswd_c, vcode:vcode},
                dataType: 'json',
                success: function(data) {
                    $('#tips-msg').html(data.msg);
                    $('#tips').show();

                    if (data.code === 1) {
                        let from = decodeURIComponent(data['data']['from']);
                        if (from) {
                            window.location.href = from;
                        } else {
                            window.location.href = '/';
                        }
                    }
                }
            }
        );
    }

    function changeVimage() {
        let rand = Math.random()*10;
        document.getElementById('regVimage').setAttribute('src', '/user_register_vcode?v='+rand);
    }

</script>
</body>
</html>
